<!-- 规则组件 -->
<template>
  <div>
    <div class="card-title card-title-background" >告警联系人{{ index+1 }} <a style="margin-left: 30px;" @click="deleteContact">删除</a></div>
    <a-form
      layout='horizontal'
      ref='form'
      :model='contact'
      :rules='contacts'
      :label-col='{ md: { span: 4 }, sm: { span: 24 } }'
      :wrapper-col='{ md: { span: 20 }, sm: { span: 24 } }'
    >
      <a-form-item label='请选择联系人:' name='contactsId'>
        <a-select
          show-search
          v-model:value="contact.contactsId"
          placeholder="请选择联系人"
          style="width: 205px;"
          :show-arrow="false"
          :filter-option="false"
          :not-found-content="null"
        >
          <a-select-option v-for="item in contactList" :key="item.contactsId" >
            {{ item.contactsName }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item label='是否开通公众号通知:' name='isWxbindPhone'>
        <a-select v-model:value="contact.isWxbindPhone" style="width: 100px;">
          <a-select-option :value="1">否</a-select-option>
          <a-select-option :value="2">是</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
export default {
  name: 'MonitorsConfObjectsContactSub',
  emits: ['update:value', 'change', 'deleteIndex'],
  props: {
    index : Number,
    contactList : Object,
    contact : Object
  },
  data() {
    return {
      contacts: [],
    };
  },
  methods: {
    deleteContact () {
      this.$emit("deleteIndex", this.index);
    }
  }
};
</script>

<style lang="less" scoped>
.card-title {
  border-left: 5px solid;
  border-color: var(--primary-color);
  padding-left: 10px;
}

.card-title-background {
  background-color: #f5f5f5;
  height: 2em;
  line-height: 2em;
  margin-bottom: 2em;
}
</style>
